<template>
	<view>
		<view class="bg_top"></view>
		<view style="position: absolute;z-index: 9;">
					<view class="myCard" style="margin-top: 62rpx;">
						<view class="card_top">
							<view style="width:228rpx;height:163rpx;padding: 23rpx 25rpx 21rpx 25rpx;">
								<image mode="aspectFill" src="../../../static/index/1130 1.png" style="width: 100%;height: 163rpx;
		border-radius: 10rpx 10rpx 10rpx 10rpx;" />
							</view>
							<view style="padding: 23rpx 25rpx 21rpx 25rpx;width: 444rpx;">
								<view
									style="display: flex;justify-content: space-between;align-items: center;">
								<view style="font-size: 25rpx;font-weight: bold;line-height: 29rpx">富氧康泰联盟</view>
								
								<view class="btn_jr" @click="golianmeng">
									加入
								</view>
								</view>
								<view style="font-size: 20rpx;font-weight: bold;color: #FFAA4D;padding-top: 25rpx;">门店会员</view>
								
									<view style="padding-top: 21rpx;">
										<image mode="aspectFill" src="../../../static/index/1130 1.png" style="width: 46rpx;height: 46rpx;
									border-radius: 50%;" />
										<image mode="aspectFill" src="../../../static/index/1130 1.png" style="width: 46rpx;height: 46rpx;margin-left: 14rpx;
									border-radius: 50%;" />
										<image mode="aspectFill" src="../../../static/index/1130 1.png" style="width: 46rpx;height: 46rpx;margin-left: 14rpx;
									border-radius: 50%;" />
									</view>
							</view>
						</view>
						<view class="cover-container">
							<!-- 订单 -->
							<view class="order-section">
								<view class="order-item" @click="navTo('/pages/order/order?state=0')" hover-class="common-hover"
									:hover-stay-time="50">
									<text class="yticon icon-yhzk"></text>
									<text>优惠折扣</text>
								</view>
								<view class="order-item" @click="navTo('/pages/order/order?state=1')" hover-class="common-hover"
									:hover-stay-time="50">
									<text class="yticon icon-lmjf"></text>
									<text>联盟积分</text>
								</view>
								<view class="order-item" @click="navTo('/pages/order/order?state=2')" hover-class="common-hover"
									:hover-stay-time="50">
									<text class="yticon icon-ksyd"></text>
									<text>快速应答</text>
								</view>
								<view class="order-item" @click="navTo('/pages/order/order?state=1')" hover-class="common-hover"
									:hover-stay-time="50">
									<text class="yticon icon-yhzk"></text>
									<text>优惠折扣</text>
								</view>
								<view class="order-item" @click="navTo('/pages/order/order?state=2')" hover-class="common-hover"
									:hover-stay-time="50">
									<text class="yticon icon-ksyd"></text>
									<text>快速应答</text>
								</view>
							</view>
						</view>
					</view>
					<view style="margin: 30rpx 22rpx 22rpx 30rpx;font-size: 20rpx;" class="card_item2">
						<view style="display: flex;align-items: center;">
							<view style="width: 5rpx;
	height: 19rpx;
	background: #FDCE9A;"></view>
							<view style="padding-left: 12rpx;">
								月月领券，价值80元
							</view>
						</view>
						<view class="quan">
							<view class="quan_bg" v-for="item in 3" :key="item">
								<view class="left">
									<view>折扣券<text style="font-size: 18rpx;color: #FDCE9A;">8.8</text>折</view>
									<view style="font-size: 10rpx;color: #FFFFFF;">最高抵扣10元</view>
								</view>
								<view class="right">
									<view>立</view>
									<view>即</view>
									<view>领</view>
									<view>取</view>
								</view>
							</view>
						</view>
					</view>
					
					<view style="margin: 30rpx 22rpx 22rpx 30rpx;font-size: 20rpx;" class="card_item2 card_item3">
						<view style="display: flex;align-items: center;">
							<view style="width: 5rpx;
	height: 19rpx;
	background: #FDCE9A;"></view>
							<view style="padding-left: 12rpx;">
								月月领券，价值80元
							</view>
						</view>
						<view class="quan2">
							<view class="quan2_bg">
								<view class="top">联盟专享</view>
								
								<view class="center"><text style="font-size: 30rpx;font-weight: bold;">500</text>元×<text style="font-size: 30rpx;font-weight: bold;">6</text>张</view>
								
								<view class="bottom">立即购买</view>
							</view>
							<view class="quan2_bg">
								<view class="top">联盟专享</view>
								
								<view class="center"><text style="font-size: 30rpx;font-weight: bold;">500</text>元×<text style="font-size: 30rpx;font-weight: bold;">6</text>张</view>
								
								<view class="bottom">立即购买</view>
							</view>
						</view>
					</view>
				</view>
				
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			};
		}
	}
</script>

<style lang="scss" scoped>
	%flex-center {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	%section {
		display: flex;
		justify-content: space-around;
		align-content: center;
		background: #fff;
		border-radius: 10upx;
	}
	.bg_top {
		position: absolute;
		top: 0px;
		left: 0px;
		width: 100%;
		height: 366rpx;
		background: url("../../../static/lianmeng/Rectangle 164.png") no-repeat;
		background-size: cover;
	}
	.order-section {
		@extend %section;
		padding: 28upx 0;
		background-color: transparent;
		margin-top: 20upx;
	
		.order-item {
			@extend %flex-center;
			width: 120upx;
			height: 120upx;
			border-radius: 10upx;
			font-size: 18rpx;
			color: $font-color-dark;
		}
	
		.yticon {
			font-size: 48upx;
			margin-bottom: 18upx;
			color: #fa436a;
		}
	
		.icon-shouhoutuikuan {
			font-size: 44upx;
		}
	}
.myCard {
		margin-left: 26rpx;
		width: 697rpx;
		height: 391rpx;
		background: #FFFFFF;
		box-shadow: 3rpx 4rpx 13rpx 2rpx rgba(163, 163, 163, 0.25);
		border-radius: 20rpx 20rpx 20rpx 20rpx;

		.card_top {
			width: 697rpx;
			height: 207rpx;
			background: linear-gradient(99deg, #FFEEDB 0%, #FFE8CF 100%);
			border-radius: 20rpx 20rpx 0px 0px;
			display: flex;
		}

		.btn_jr {
			width: 114rpx;
			text-align: center;
			color: #FDCE9A;
			height: 32rpx;
			line-height: 32rpx;
			font-size: 20rpx;
			background: linear-gradient(180deg, #545454 0%, #000000 100%);
			border-radius: 100rpx 100rpx 100rpx 100rpx;
		}
	}
	.card_item2{
		width: 681rpx;
		height: 201rpx;
		background: #FFFFFF;
		box-shadow: 3rpx 4rpx 10rpx 2rpx rgba(209,209,209,0.25);
		border-radius: 20rpx;
		padding: 23rpx;
	}
	.card_item3 {
		background: #1D1D1D;
		color: #FFFFFF;
		height: 433rpx;
	}
	.quan_bg{
		position: relative;
		width: 195rpx;
		height: 100rpx;
		background: url('../../../static/lianmeng/Group 34.png') no-repeat;
		background-size: cover;
		.left{
			position: absolute;
			left:29rpx;
			top:31rpx;
			font-size: 15rpx;
			line-height: 25rpx;
			color: #fff;
			text-align: center;
		}
		.right{
			position: absolute;
			right:12rpx;
			top:15rpx;
			color: #FDCE9A;
			font-size: 15rpx;
			line-height: 20rpx;
		}
	}
	.quan2_bg{
		position: relative;
		width: 303rpx;
		height: 298rpx;
		background: url('../../../static/lianmeng/Group 35.png') no-repeat;
		background-size: cover;
		.top{
			position: absolute;
			left:108rpx;
			top:4rpx;
			font-size: 20rpx;
			line-height: 23rpx;
			color: #685737;
			text-align: center;
		}
		.center{
			position: absolute;
			left:80rpx;
			top:107rpx;
			color: #70592D;
			font-size: 20rpx;
			line-height: 41rpx;
			text-align: center;
		}
		.bottom{
			position: absolute;
			right:91rpx;
			bottom:10rpx;
			color: #685737;
			font-size: 30rpx;
			text-align: center;
			line-height: 35rpx;
		}
	}
	.quan{
		display: flex;
		margin-top: 26rpx;
		// :nth-child(3){
		// 	margin-left: 26rpx;
		// }
	}
	.quan > :not(:first-child) {
		margin-left: 26rpx;
	}
	.quan2{
		display: flex;
		margin-top: 36rpx;
		// :nth-child(3){
		// 	margin-left: 26rpx;
		// }
	}
	.quan2 > :not(:first-child) {
		margin-left: 33rpx;
	}
</style>
